<div class="icons-social">
<ul id="social">
<li><a class="facebook" href="#" title="facebook"></a></li>
<li><a class="twitter" href="#" title="twitter"></a></li>
<li><a class="gplus" href="#" title="gplus"></a></li>
<li><a class="linkedin" href="#" title="linkedin"></a></li>
<li><a class="instagram" href="#" title="instagram"></a></li>
<li><a class="pinterest" href="#" title="pinterest"></a></li>
</ul></div>
<style>
.icons-social li {
    display: inline-block;
padding: 0;
text-align: left;
;
}

.icons-social #social a {
display: block;
height: 42px;
width: 42px;
color: #2b2b2b;
text-align: center;
font-size: 20px;
}
.icons-social #social a:before {
display: inline-block;
font: normal normal normal 22px/1 FontAwesome;
font-size: inherit;
font-style: normal;
font-weight: 400;
line-height: 44px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icons-social .facebook:before {
content: "\f09a";
}

.icons-social .twitter:before {
content: "\f099";
}

.icons-social .gplus:before {
content: "\f0d5";
}

.icons-social .linkedin:before {
content: "\f0e1";
}

.icons-social .instagram:before {
content: "\f16d";
}

.icons-social .pinterest:before {
content: "\f0d2";
}

</style>